<template>
  <!-- 数钞票等待 -->
  <div class="wait">
    <img src="https://static.hudongmiao.com/joymewH5/img/countMoney/title.png" class="countMoneyTitle" />
    <img src="https://static.hudongmiao.com/joymewH5/img/countMoney/hbShell2.png" class="hbShell2" />
    <img src="https://static.hudongmiao.com/joymewH5/img/countMoney/coupon.png" class="coupon" />
    <img src="https://static.hudongmiao.com/joymewH5/img/countMoney/coupon.png" class="coupon2" />
    <div class="waitTip">
      等待主持人开始游戏
      <div class="dot">...</div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'countMoneyWait',
  computed: {},
  components: {},
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {},
  beforeCreated() {},
};
</script>
<style lang="less" scoped>
.wait {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .countMoneyTitle {
    width: 603px;
    height: 311px;
    margin-top: 179px;
  }
  .hbShell2 {
    width: 612px;
    height: 641px;
    position: absolute;
    bottom: 162px;
  }
  .coupon {
    width: 91px;
    height: 84px;
    position: absolute;
    left: 19px;
    top: 498px;
  }
  .coupon2 {
    width: 91px;
    height: 84px;
    position: absolute;
    right: 19px;
    top: 623px;
    transform: rotate(-95deg);
  }
  .waitTip {
    font-size: 24px;
    font-weight: 400;
    color: #ffffff;
    position: absolute;
    bottom: 273px;
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
    .dot {
      overflow: hidden;
      position: absolute;
      width: 46px;
      left: 66vw;
      top: 0vw;
      letter-spacing: 2px;
      animation: ellipsis 1s infinite;
      animation-timing-function: steps(1);
    }
  }
  @keyframes ellipsis {
    0% {
      width: 0px;
    }
    25% {
      width: 12px;
    }
    50% {
      width: 26px;
    }
    75% {
      width: 47px;
    }
  }
}
</style>
